<template>
	<view>
		<uv-sticky bgColor="#fff">
			<view style="padding: 20rpx;">
				<uv-subsection :list="list" :current="current" custom-style="height: 100rpx;" fontSize="15" activeColor="#333"  @change="(e)=>current=e"></uv-subsection>
			</view>
		</uv-sticky>
		
		<uni-notice-bar show-icon text="点击工具查看详情" />

		<template v-if="current==0">
			<view class="bg">
				<view @click="handleCalendar">
					<view class="content">
						<image style="width: 180rpx;height: 180rpx;" src="/static/calculate.png"></image>
					</view>
					<view class="title">计算器</view>
				</view>

				<view @click="handleUnit">
					<view class="content">
						<image style="width: 180rpx;height: 180rpx;" src="/static/unit.png"></image>
					</view>
					<view class="title">单位换算</view>
				</view>

				<view @click="handleHouse">
					<view class="content">
						<image style="width: 180rpx;height: 180rpx;" src="/static/house.png"></image>
					</view>
					<view class="title">房贷计算</view>
				</view>

				<view @click="handleMath">
					<view class="content">
						<image style="width: 180rpx;height: 180rpx;" src="/static/math.png"></image>
					</view>
					<view class="title">数学公式</view>
				</view>
				
				<view @click="handleSudoku">
					<view class="content">
						<image style="width: 180rpx;height: 180rpx;" src="/static/sudoku.png"></image>
					</view>
					<view class="title">数独计算</view>
				</view>
				
				<view @click="handleRMB">
					<view class="content">
						<image style="width: 180rpx;height: 180rpx;" src="/static/RMB.png"></image>
					</view>
					<view class="title">人民币转大写</view>
				</view>
				
				<view @click="handleProportion">
					<view class="content">
						<image style="width: 180rpx;height: 180rpx;" src="/static/proportion.png"></image>
					</view>
					<view class="title">比例计算</view>
				</view>
				
				<view @click="handleRelation">
					<view class="content">
						<image style="width: 180rpx;height: 180rpx;" src="/static/relative.png"></image>
					</view>
					<view class="title">亲属关系</view>
				</view>
			</view>
		</template>

		<template v-else>
			<view class="bg">
				<view @click="handleJianDao">
					<view class="content">
						<image style="width: 180rpx;height: 180rpx;" src="/static/jsb.png"></image>
					</view>
					<view class="title">石头剪刀布</view>
				</view>
				
				<view @click="handleAgile">
					<view class="content">
						<image style="width: 180rpx;height: 180rpx;" src="/static/agile.png"></image>
					</view>
					<view class="title">反应训练</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow,
		onShareAppMessage
	} from '@dcloudio/uni-app'

	const current = ref(0)
	const list = [{
		name: '通用计算'
	}, {
		name: '其他'
	}]

	onShareAppMessage(() => {
		if (res.from === 'button') { // 来自页面内分享按钮
			console.log(res.target)
		}
		return {
			title: '才发现这么实用的工具',
			path: '/pages/index/index'
		}
	})

	// 计算器
	function handleCalendar() {
		uni.navigateTo({
			url: "/pages/index/calculate/calculate"
		})
	}

	// 单位换算
	function handleUnit() {
		uni.navigateTo({
			url: "/pages/index/unit/unit"
		})
	}

	// 房贷计算
	function handleHouse() {
		uni.navigateTo({
			url: "/pages/index/house/house"
		})
	}

	// 数学公式
	function handleMath() {
		uni.navigateTo({
			url: "/pages/index/math/math"
		})
	}
	
	// 数独计算
	function handleSudoku(){
		uni.navigateTo({
			url: "/pages/index/sudoku/sudoku"
		})
	}
	
	// 人民币转大写计算
	function handleRMB(){
		uni.navigateTo({
			url: "/pages/index/RMB/RMB"
		})
	}
	
	// 比例计算
	function handleProportion(){
		uni.navigateTo({
			url: "/pages/index/proportion/proportion"
		})
	}
	
	// 亲属关系
	function handleRelation(){
		uni.navigateTo({
			url: "/pages/index/relative/relative"
		})
	}
	
	// 石头剪刀布
	function handleJianDao() {
		uni.navigateTo({
			url: "/pages/index/jianDao/jianDao"
		})
	}
	
	// 反应训练
	function handleAgile(){
		uni.navigateTo({
			url: "/pages/index/agile/agile"
		})
	}
</script>

<style>
	@import "index.css"
</style>